<template>
    <div class="detail_container">
        <el-tabs v-model="state.activeName">
            <el-tab-pane v-for="{ name, label } in detailTabsCopy" :label="label" :name="name" :key="name" />
        </el-tabs>

        <!-- 我的账户 -->
        <div v-if="state.activeName === 'account'">
            <component :is="currentStep" @changeTab="changeTab" :baseInfoObj="state.entObj" :loginNo="state.loginNo" />
        </div>

        <!-- 待结算订单 -->
        <div v-else-if="state.activeName === 'unsettle'">
            <Unsettled :loginNo="state.loginNo"></Unsettled>
        </div>

        <!-- 基本信息 -->
        <div v-else-if="state.activeName === 'info'">
            <base-info :baseInfoObj="state.entObj"></base-info>
        </div>
    </div>
</template>

<script setup>
import Unsettled from './unsettled.vue';
import PersonalAccount from './personalAccount.vue';
import CommercialAccount from './commercialAccount.vue';
import BaseInfo from './baseInfo.vue';
import request from '@/request';
import storage from '@/commons/storage';
import { reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();

const detailTabs = [
    { name: 'account', label: '我的账户' },
    { name: 'unsettle', label: '待结算订单' },
    { name: 'info', label: '基本信息' }
];

const state = reactive({
    activeName: '',
    entObj: {}
});

const detailTabsCopy = computed(() => {
    const tabs = [];
    // 接口返回后取值
    if (state.entObj.loginNo) {
        tabs.push(detailTabs[0]);
        // 企业 账户未签约，不展示待结算tab、不展示待结算订单收入
        // 个体 若没开通微信支付，则不展示  待结算订单tab
        // 个人账户没有
        if ([1, 2].includes(state.entObj.accountType)) {
            state.entObj?.accountStatus === 10 && tabs.push(detailTabs[1]);
        }
        tabs.push(detailTabs[2]);
    }
    return tabs;
});

const currentStep = computed(() => {
    return ['', CommercialAccount, CommercialAccount, PersonalAccount][state.entObj.accountType];
});

// 手动选中tab
const changeTab = val => {
    state.activeName = val;
};

// 账户详情
const queryAccountInfo = async () => {
    const { data } = await request('queryBaofuAccountInfoServ', { loginNo: state.loginNo });
    state.entObj = Object.assign({}, data);
};

onMounted(() => {
    state.loginNo = route.query.no || storage.get('ZW-LOGIN_NO');
    state.activeName = route.query?.activeName || 'account';
    queryAccountInfo();
});
</script>

<style lang="scss" scoped>
.detail_container {
    :deep(.el-tabs) {
        .el-tabs__nav-scroll {
            margin-top: -12px;
        }

        .el-tabs__header {
            margin-bottom: 24px;

            .el-tabs__item {
                color: #999999;
                font-family: PingFangSC-Medium, PingFang SC;
                font-size: 16px;
                &:focus-visible {
                    box-shadow: none;
                }
            }

            .el-tabs__item.is-active {
                color: #ff6b00;
                font-weight: 500;
            }

            .el-tabs__nav-wrap::after {
                height: 1px;
                background: #eaeaea;
            }
        }
    }
}
</style>
